<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ include file="/WEB-INF/views/public/main.jsp"%>
<link type="text/css"
	href="${resourceUrl}/css/jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script type="text/javascript"
	src="${resourceUrl}/js/jquery-ui-1.7.3.custom.min.js"></script>
<script
	src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"
	type="text/javascript"></script>
<script src="${resourceUrl}/js/module_regsiter_agent.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		var $tabs = $("#tabs").tabs();

		onRegisterModuleLoad();

	});
</script>

<div id="main" class="clearfix" style="padding: 10px 0px;">

	<div class="container_12">
		<div class="grid_12">

			<div id="tabs" style="min-height: 550px;">

				<ul>
					<li><a href="#">Agent Registration</a></li>
				</ul>

				<div id="registrationModule" class="tab_padding">
					<p>Fill in the following form and click submit to complete
						registration</p>

					<form:form method="POST" id="registration_form" action=""
						commandName="user" class="noEnterSubmit">
						<fieldset class="ui-helper-reset">
							<table>
								<tr>
									<td class="label"><label id="lusername" for="username">UserName*</label>
									</td>
									<td><form:input path="username" id="username"
											class="required textbox" minlength="8"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lpassword" for="password">Password*</label></td>
									<td><form:input path="password" id="password"
											type="password" class="required password textbox"
											minlength="8"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lconfirmPassword"
										for="password">Re-Enter Password*</label></td>
									<td><form:input path="" id="confirmPassword"
											type="password" class="required textbox" equalTo="#password"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lfirstName" for="firstName">First
											Name*</label></td>
									<td><form:input path="firstName" id="firstName"
											class="required textbox" minlength="2"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lMiddleName" for="middleName">Middle
											Name*</label></td>
									<td><form:input path="middleName" id="middleName"
											class="textbox"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="llastName" for="lastName">Last
											Name*</label></td>
									<td><form:input path="lastName" id="lastName"
											class="required textbox" minlength="2"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lbirthDate" for="birthDate">Birth
											Date*</label></td>
									<td><form:input path="birthDate" id="birthDate"
											type="text" class="required textbox datepicker"
											readonly="readonly"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lemail" for="email">Email</label></td>
									<td><form:input path="email" id="email"
											class="email textbox"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lmobileNumber"
										for="mobileNumber">Mobile Number*</label></td>
									<td><form:input path="mobileNumber" id="mobileNumber"
											class="required number textbox" minlength="10"></form:input></td>
								</tr>

								<tr>
									<td>State</td>
									<td><select name="stateList" id="stateList">
											<c:forEach var="state" items="${stateList}">
												<option value="${state.getId()}"
													<c:if test='${defaultStateId == state.getId()}'> selected="selected" </c:if>>${state.getName()}</option>
											</c:forEach>
									</select></td>
								</tr>
								<tr>
									<td>District</td>
									<td><select name="districtList" id="districtList">
											<c:forEach var="district" items="${districtList}">
												<option value="${district.getId()}">${district.getName()}</option>
											</c:forEach>
									</select></td>
								</tr>
								<tr>
									<td>City</td>
									<td><form:select name="cityList" id="cityList"
											path="city.id">
											<c:forEach var="city" items="${cityList}">
												<option value="${city.getId()}">${city.getName()}</option>
											</c:forEach>
										</form:select></td>
								</tr>
								<tr>
									<td class="label"><label id="lstreet" for="street">Address*</label></td>
									<td><form:textarea path="street" id="street"
											class="required textarea" minlength="10"></form:textarea></td>
								</tr>
								<tr>
									<td class="label"><label id="larea" for="area">Area</label></td>
									<td><form:input path="area" id="area"
											class="required textbox" minlength="4"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="larea" for="pinCode">PinCode*</label></td>
									<td><form:input path="pinCode" id="pinCode"
											class="required number textbox" minlength="6"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lsecurityQ"
										for="securityQuestion">Security Question*</label></td>
									<td><form:input path="securityQuestion"
											id="securityQuestion" class="required textbox" minlength="10"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label id="lsecurityQ"
										for="securityAnswer">Security Answer*</label></td>
									<td><form:input path="securityAnswer" id="securityAnswer"
											class="required textbox" minlength="3"></form:input></td>
								</tr>
								<tr>
									<td class="label"><label></label></td>
									<td><input type="submit" value="Submit" id="submitButton"
										class="required customButton" />
								</tr>


							</table>
						</fieldset>
					</form:form>


					<div id="registration_dialog" class="dialog"
						title="Submitting regsitration form!! Please wait...">
						<div class="ajaxLoading">
							<img src="${resourceUrl}/images/ajax-loader.gif">
						</div>
						<label id="regstrationStatus"></label>

					</div>

				</div>


			</div>
		</div>
		<!--//grid_12-->
		<div class="clear"></div>
		<!--//clear columns-->

	</div>
	<!-- //container_12 -->

</div>
<!-- //main -->